<template>
    <a-layout-header class="header">
        <div class="logo">
        知识库
        </div>
        <a-menu
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="/">
                <router-link to="/">首页</router-link>
            </a-menu-item>
            <a-menu-item key="/admin/user" :style="user.id?{}:{display:'none'}">
                <router-link to="/admin/user">用户管理</router-link>
            </a-menu-item>
            <a-menu-item key="/admin/ebook" :style="user.id?{}:{display:'none'}">
                <router-link to="/admin/ebook">电子书管理</router-link>
            </a-menu-item>
            <a-menu-item key="/admin/category" :style="user.id?{}:{display:'none'}">
                <router-link to="/admin/category">分类管理</router-link>
            </a-menu-item>
            <a-menu-item key="/about">
                <router-link to="/about">关于我们</router-link>
            </a-menu-item>
            <a-popconfirm
                    title="是否退出登录?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="logout"
            >
                <a class="login-menu" v-show="user.id"><span>退出登录</span></a>
            </a-popconfirm>
            <a class="login-menu" v-show="user.id"><span>你好：{{user.name}}</span></a>
            <a class="login-menu" v-show="!user.id" @click="showLoginModal"><span>登录</span></a>
        </a-menu>
        <a-modal
                title="登录"
                v-model:visible="loginModelVisible"
                :confirm-loading="loginModelLoading"
                @ok="login"
        >
            <a-form :model="loginUser" :label-col="{span:6}" :wrapper-col="{ span: 18 }">
                <a-form-item label="登录名">
                    <a-input v-model:value="loginUser.loginName"/>
                </a-form-item>
                <a-form-item label="密码">
                    <a-input v-model:value="loginUser.password" type="password"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-layout-header>
</template>

<script lang="ts">
    import {defineComponent, ref, computed, createVNode} from 'vue';
    import Axios from "axios";
    import {message, Modal} from "ant-design-vue";
    import store from "@/store";
    import ExclamationCircleOutlined from "@ant-design/icons-vue/ExclamationCircleOutlined";
    import router from "@/router";

    declare let hexMd5: any;
    declare let KEY: any;

    export default defineComponent({

        name: 'the-header',

        setup() {
            const user = computed(() => store.state.user);
            const loginUser = ref({
                loginName: '',
                password: ''
            });
            const loginModelVisible = ref(false);
            const loginModelLoading = ref(false);
            const showLoginModal = () => {
                loginModelVisible.value = true;
            }

            /**
             *登录
             */
            const login = () => {
                loginModelLoading.value = true;
                loginUser.value.password = hexMd5(loginUser.value.password + KEY);
                Axios.post('/user/login', loginUser.value).then(respones => {
                    loginModelLoading.value = false;
                    const data = respones.data;
                    if (data.success) {
                        loginModelVisible.value = false;
                        message.success("登录成功!");
                        store.commit("setUser", data.content);
                        loginUser.value.password = '';
                    } else {
                        message.error(data.message);
                    }
                })
            };

            /**
             *退出登录
             */
            const logout = () => {
                Axios.get('/user/logout/' + user.value.token).then(respones => {
                    const data = respones.data;
                    if (data.success) {
                        store.commit("setUser", {});
                        message.success("退出登录成功!");
                        router.replace("/")
                    } else {
                        message.error(data.message);
                    }
                })
            };

            return {
                loginUser,
                loginModelLoading,
                loginModelVisible,
                showLoginModal,
                login,
                user,
                logout
            }

        }
    });
</script>

<style>
    .logo {
        width: 120px;
        height: 31px;
        /*background: rgba(255, 255, 255, 0.2);*/
        /*margin: 16px 28px 16px 0;*/
        float: left;
        color: white;
        font-size: 18px;
    }
    .login-menu {
        float: right;
        color: white;
        padding-left: 10px;
    }
</style>